<md-card>
    <!--<md-toolbar color="accent">Messages</md-toolbar>-->
    <md-card-title> Messages - Websocket based</md-card-title>
    <a routerLink="/features/chat" routerLinkActive="active">Go to Chat</a>
    <md-card-content>
        <div>
            <h3>
                Inline Editing - Double-click to edit a value
            </h3>
            <ngx-datatable #mydatatable class="material" [headerHeight]="50" [limit]="5" [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
                [rows]="messages">
                <ngx-datatable-column name="UserLogin">
                    <ng-template ngx-datatable-cell-template let-value="value" let-row="row">
                        <span title="Double click to edit" (dblclick)="editing[row.$$index + '-user-login'] = true" *ngIf="!editing[row.$$index + '-user-login']">
              {{value}}
            </span>
                        <input autofocus (blur)="updateValue($event, 'userLogin', value, row)" *ngIf="editing[row.$$index + '-user-login']" type="text"
                            [value]="value" />
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column name="Message">
                    <ng-template ngx-datatable-cell-template let-value="value" let-row="row">
                        <span title="Double click to edit" (dblclick)="editing[row.$$index + '-message'] = true" *ngIf="!editing[row.$$index + '-message']">
              {{value}}
            </span>
                        <input autofocus (blur)="updateValue($event, 'message', value, row)" *ngIf="editing[row.$$index + '-message']" type="text"
                            [value]="value" />
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column name="CreatedAt">
                    <ng-template ngx-datatable-cell-template let-value="value">
                        {{value}}
                    </ng-template>
                </ngx-datatable-column>
                <ngx-datatable-column name="UpdatedAt">
                    <ng-template ngx-datatable-cell-template let-value="value">
                        {{value}}
                    </ng-template>
                </ngx-datatable-column>
            </ngx-datatable>
        </div>
</md-card>
